<template>
  <ol class="music-list">
    <li
      v-for="(music, index) in musiclist"
      :key="music.id + index + music.name"
    >
      <!-- {{ music.name }} {{ music.song.alias[0] }} -->

      <i class="num">{{ index + 1 }} </i>

      <div class="left">
        <div class="name">
          {{ music.name }}

          <span v-if="music.song.alias.length > 0"
            >(<b v-for="(alias, i) in music.song.alias" :key="i + alias">
              {{ alias }} </b
            >)
          </span>
        </div>
        <!-- 第二行显示 -->
        <div class="artist">
          <span
            v-for="(artist, num) in music.song.artists"
            :key="artist.id + num + artist.name"
          >
            {{ artist.name }}
          </span>

          - {{ music.song.album.name }}
        </div>
      </div>

      <load-animate
        v-if="currentmusic && currentmusic.id == music.id"
        class="right-btn"
        style="background-image: none"
        :showtext="false"
      ></load-animate>

      <div v-else class="right-btn" @click.stop="$emit('play', music)"></div>
    </li>
  </ol>
</template>

<script>
export default {
  props: {
    musiclist: {
      type: Array,
      default: () => {
        return [];
      },
    },
    currentmusic: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.music-list {
  li {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f2f2f252;

    .num {
      margin: 0 10px;
      font-size: 17px;
      color: #999;
    }

    .left {
      flex: 1;
      .name {
        font-size: 17px;
        color: #333;
        p {
          display: inline-block;
        }
        span {
          color: #999;
        }
      }
      .artist {
        font-size: 12px;
        padding-top: 8px;
        color: #999;
        span {
        }
        &.sq::before {
          content: "";
          display: inline-block;
          background: url("@/assets/icon.png") no-repeat 0 0;
          background-size: 155px;
          width: 12px;
          height: 8px;
          margin-right: 4px;
        }
      }
    }
    .right-btn {
      width: 22px;
      height: 22px;
      // overflow: hidden;
      background: url(../assets/播放.png) no-repeat;
      background-size: cover;
      margin-right: 10px;
    }
  }
}
</style>